<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>跑者天地 - 详细页面</title>
    <link rel="stylesheet" href="css/css/all.min.css">
    <link rel="stylesheet" href="css/styles.css">
</head>
<body>
<!-- 头部导航 -->
<div id="header-container"></div>


<!-- 文章内容 -->
<div class="article-container">
    <div class="article-header" id="article-header1">


    </div>

<!--    <div class="article-content" id="article-content1">

    </div>-->

    <div class="detail" id="detail" style="background-color: transparent"></div>

    <div class="article-actions">
        <button class="action-btn like-btn">
            <i class="far fa-thumbs-up"></i> 点赞 (124)
        </button>
        <button class="action-btn save-btn">
            <i class="far fa-bookmark"></i> 收藏
        </button>
        <button class="action-btn share-btn">
            <i class="fas fa-share-alt"></i> 分享
        </button>
    </div>
</div>

<script src="js/jquery.min.js"></script>
<script src="js/common.js"></script>

<!-- 引入 editor.md 的依赖 -->
<link rel="stylesheet" href="running-editormd/css/editormd.css" />
<script src="js/jquery.min.js"></script>
<script src="running-editormd/lib/marked.min.js"></script>
<script src="running-editormd/lib/prettify.min.js"></script>
<script src="running-editormd/editormd.js"></script>

<script src="js/common.js"></script>


<script>
    $.ajax({ })


    // 加载头部内容
    fetch('header.html')
        .then(response => response.text())
        .then(data => {
            document.getElementById('header-container').innerHTML = data;
            // 设置当前页面导航激活状态
            document.querySelector('a[href="index.html"]').classList.add('active');
        });

    $.ajax({
        type:"get",
        url:"articles/selectArticleByArticleId"+location.search,
        success:function (result) {
            if (result.code == "SUCCESS" && result.data) {
                var finalHtml = '';
                var resultData = result.data;
                finalHtml +='<h1 class="article-title">'+resultData.title+'</h1>';
                finalHtml +='<div class="article-meta"><div class="author-info"><div class="author-avatar">跑</div>';
                finalHtml +='<div class="author-details"><span class="author-name">'+resultData.author+'-'+resultData.levelZT+'</span>';
                finalHtml +='</div></div>';
                finalHtml +='<div class="article-stats"><div class="stat-item"><i class="far fa-eye"></i>'+resultData.viewCount+'</div>';
                finalHtml +='<div class="stat-item"><i class="far fa-clock"></i>'+resultData.createdAt+'</div>';
                finalHtml +='</div></div>';

            }
            $(".article-container #article-header1").html(finalHtml)

            // 内容
            editormd.markdownToHTML("detail",{
                markdown:resultData.content
            });

        },
        error:function (error){
            if(error!=null&&error.status==401){
                location.href = "/login.html"
            }
        }
    })



    // 点赞功能
    const likeBtn = document.querySelector('.like-btn');
    let likeCount = 124;
    let liked = false;

    likeBtn.addEventListener('click', function () {
        if (!liked) {
            likeCount++;
            this.innerHTML = `<i class="fas fa-thumbs-up"></i> 已点赞 (${likeCount})`;
            liked = true;
            this.style.background = '#ffeef0';
            this.style.color = '#e74c3c';
        } else {
            likeCount--;
            this.innerHTML = `<i class="far fa-thumbs-up"></i> 点赞 (${likeCount})`;
            liked = false;
            this.style.background = '#f8f9fa';
            this.style.color = '#2c3e50';
        }
    });

    // 收藏功能
    const saveBtn = document.querySelector('.save-btn');
    let saved = false;

    saveBtn.addEventListener('click', function() {
        if (!saved) {
            this.innerHTML = `<i class="fas fa-bookmark"></i> 已收藏`;
            saved = true;
            this.style.background = '#e6f7ff';
            this.style.color = '#3498db';
        } else {
            this.innerHTML = `<i class="far fa-bookmark"></i> 收藏`;
            saved = false;
            this.style.background = '#f8f9fa';
            this.style.color = '#2c3e50';
        }
    });

    // 分享功能
    const shareBtn = document.querySelector('.share-btn');
    shareBtn.addEventListener('click', function() {
        alert('文章链接已复制到剪贴板！\n\n分享给更多跑友吧！');
    });
</script>
</body>
</html>